<template>
  <el-form class="process" v-bind="$attrs" @submit.native.prevent>
    <el-form-item label="后期处理" class="shrink-process-label">
      <div class="shrink" @click="shrink('process')">
        <SvgIcon v-if="shrinkFlag.process" icon-class="ic_向上" />
        <SvgIcon v-else icon-class="ic_向下" />
      </div>
      <div class="line"></div>
      <div v-if="shrinkFlag.process" class="shrink-contain">
        <div v-for="item in processList">
          <div
            class="row-item selected"
            :class="selectedProcess.key === item.key ? 'active' : ''"
            :key="item.key"
            @click="selectProcess(item)"
          >
            <span>{{ item.label }}</span>
            <div class="switch" @click.stop>
              <el-switch
                active-text="开"
                inline-prompt
                inactive-text="关"
                v-model="item.value.enabled"
                @change="postProcess(item)"
              />
            </div>
          </div>
          <Content
            :process="item"
            :key="item.key"
            :class="item.value.enabled ? '' : 'disable'"
            v-if="status && selectedProcess.key === item.key"
          />
        </div>
      </div>
    </el-form-item>
  </el-form>
</template>

<script setup lang="ts">
import Content from './component/content.vue';

defineOptions({
  name: 'Process',
});

interface IProps {
  form: [];
}
const props = withDefaults(defineProps<IProps>(), {
  form: () => [],
});

const selectedProcess = ref<any>({});
const processList = ref<any[]>([]);
const shrinkFlag = reactive<any>({
  process: true,
});
const status = ref(false);

function shrink(str: string) {
  shrinkFlag[str] = !shrinkFlag[str];
}

const selectProcess = (process: any) => {
  if (selectedProcess.value.key === process.key) {
    status.value = !status.value;
  } else {
    status.value = true;
    selectedProcess.value = process;
  }
};

function postProcess(item: any) {
  selectedProcess.value = item;
  status.value = true;
  const cimInstance = window.cimInstance;
  console.log('--当前操作了--', item.key, item.value);
  cimInstance.api.updatePostProcessByName(item.key, item.value);
}

watchEffect(() => {
  processList.value = props.form;
});
</script>

<style lang="less" scoped>
.process {
  height: 100%;

  .shrink-process-label {
    height: 100%;

    :deep(.el-form-item__content) {
      height: calc(100% - 40px);

      .shrink-contain {
        height: 100%;
        overflow-y: auto;
      }
    }
  }

  .row-item {
    &.selected {
      height: 32px;
      cursor: pointer;
      margin-top: 10px !important;
      &:hover {
        margin-left: -10px;
        margin-right: -10px;
        padding: 0 10px;
        background-color: rgba(5, 96, 253, 0.2);
        border-radius: 4px;
      }

      &.active {
        margin-left: -10px;
        margin-right: -10px;
        padding: 0 9px;
        background: rgba(5, 96, 253, 0.2);
        border-radius: 4px;
        border: 1px solid #0560fd;
      }

      .switch {
        margin-left: auto;

        :deep(.el-switch) {
          height: 22px;
          font-size: 12px;
          line-height: 22px;
        }
      }
    }
  }
}
</style>
